<template>
    <el-icon :size="size">
        <svg-icon :icon-class="iconInfo.name" v-if="iconInfo.type === 'icon'" />
        <component :is="iconInfo.name" v-else-if="iconInfo.type === 'ele'" class="svg-icon" />
        <svg-icon :icon-class="iconInfo.name" v-else-if="iconInfo.type === 'customize'" prefix="customize" />
    </el-icon>
</template>

<script setup>
const props = defineProps({
    name: {
        type: String,
        required: true
    },
    size: {
        type: [String, Number],
    }
})


// 根据不同的前缀判断类型
const iconInfo = computed(() => {
    const sysRegex = /^icon-(.+)$/
    const customRegex = /^customize-(.+)$/
    const epRegex = /^ele-(.+)$/
    if (sysRegex.test(props.name)) {
        return { type: 'icon', name: props.name.replace(sysRegex, '$1') }
    } else if (customRegex.test(props.name)) {
        return { type: 'customize', name: props.name.replace(customRegex, '$1') }
    } else if (epRegex.test(props.name)) {
        return { type: 'ele', name: props.name.replace(epRegex, '$1') }
    } else {
        // 默认按照系统内置处理
        return { type: 'icon', name: props.name }
    }
})
</script>


<style lang="scss" scoped></style>